<template>
    <!-- 使用toRefs 可以简写取值的方式 -->
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.job2.salary}} k</h2>
    <h2 v-show="person.car">座驾信息：{{person.car}} </h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.job2.salary++">增长薪资</button>
    <button @click="showRawPerson()">输出最原始的person</button>
    <button @click="addCar()">给人添加一台车</button>
    <button v-show="person.car" @click="person.car.name+='~'">汽车换名</button>
    <button v-show="person.car" @click="person.car.price++">汽车换价格</button>
    <button v-show="person.car" @click="changePrice()">汽车换价格打印</button>


    <hr>
    <h1>当前求和：{{sum}}</h1>
    <button @click="sum++">点我加一</button>
</template>

<script>
    // Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
    import { ref, reactive, toRefs, toRaw, markRaw } from 'vue';
    export default {
        name: 'Demo',
        setup() { // setup在工作过程中仅仅调用一次
            // 数据
            let person = reactive({
                name: '张三',
                age: 18,
                job: {
                    job2: {
                        salary: 20
                    }
                },
                // car: {
                //     // 此处定义一个空的car，可以解决初始化报错的问题
                // }
            });
            let sum = ref(0);

            // 显示原生的person数据
            function showRawPerson() {
                // 作用：将一个由reactive生成的响应式对象转为普通对象。不能处理ref生成的响应式数据的。
                // 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
                const p = toRaw(person);
                console.log(p);
            }

            // 给人添加一台车
            function addCar() {
                let car = {
                    name: '奔驰',
                    price: 50
                }
                // 作用：标记一个对象，使其永远不会再成为响应式对象。
                person.car = markRaw(car);
            }

            function changePrice() {
                person.car.price++;
                console.log(person.car.price);
            }

            // 返回一个对象（常用）
            return {
                sum,
                person,
                ...toRefs(person),
                showRawPerson,
                addCar,
                changePrice,
            }
        }
    }
</script>

<style>

</style>